<!-- 总站综合信息 -->
<template>
	<div class="chart-scrollbar layout-station scroll-container">
		<pageHeader :headerTitle="$t('message.mainStationComprehensiveNews.pageTitle')" :showWeather="false" />

		<div style="height: 0.5rem"></div>

		<multipleInfo />

		<div style="height: 0.5rem"></div>

		<el-row :gutter="5">
			<el-col :span="8"><realTimePowerCharts /></el-col>
			<el-col :span="16"><stationRollContent /></el-col>
		</el-row>

		<div style="height: 0.5rem"></div>

		<el-row :gutter="5">
			<el-col :span="8">
				<dayDispatchHours :daySendHours="daySendHours" />
			</el-col>
			<el-col :span="16"><pageChangeBtn /></el-col>
		</el-row>
	</div>
</template>

<script lang="ts">
import { useI18n } from 'vue-i18n';
import multipleInfo from './components/multipleInfo.vue';
import pageChangeBtn from './components/pageChangeBtn.vue';
import dayDispatchHours from './components/dayDispatchHours.vue';
import pageHeader from '../../components/pageHeader/index.vue';
import stationRollContent from './components/stationRollContent.vue';
import realTimePowerCharts from './components/realTimePowerCharts.vue';
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';

export default defineComponent({
	components: { pageChangeBtn, multipleInfo, pageHeader, dayDispatchHours, stationRollContent, realTimePowerCharts },
	setup() {
		const { t } = useI18n();

		const state = reactive({
			tableData: [],
			isHighResolution: false,
		});

		const daySendHours = ref([
			{
				id: 1,
				name: '苏州天佑',
				value: 1.77,
			},
			{
				id: 2,
				name: '太仓利洁时',
				value: 1.69,
			},
			{
				id: 3,
				name: '无锡液空',
				value: 2.51,
			},
			{
				id: 4,
				name: '佳木斯粮油',
				value: 0.69,
			},
			{
				id: 5,
				name: '齐齐哈尔飞鹤乳业',
				value: 3.51,
			},
			{
				id: 4,
				name: '佳木斯粮油',
				value: 0.69,
			},
			{
				id: 5,
				name: '齐齐哈尔飞鹤乳业',
				value: 3.51,
			},
			{
				id: 4,
				name: '佳木斯粮油',
				value: 0.69,
			},
			{
				id: 5,
				name: '齐齐哈尔飞鹤乳业',
				value: 3.51,
			},
		]);

		onMounted(() => {
			state.isHighResolution = window.innerWidth >= 1600;
		});

		return {
			...toRefs(state),
			daySendHours,
		};
	},
});
</script>

<style lang="scss" scoped>
.chart-scrollbar {
	color: #fff;
	padding: 0.5rem;
	height: 100vh;
	background: url('../../assets/bgImage.png') center center / 100% 100% no-repeat;
}

/* 隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
	display: none;
}

.scroll-container {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
</style>
